<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>活动设置结算</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
   <link rel="stylesheet" href="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.index.css">
    <link rel="stylesheet" href="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.reset.css">
    <style>
        .el-form-item {
            margin-bottom: 10px;
        }
        .el-button+.el-button {
            margin-left: 0px;
        }
        .el-button--primary {
            margin-bottom: 10px;
        }
        .content-container .tab-menu {
            padding: 0px 20px;
            background: #F5F7FA;
            height: 50px;
            border-bottom: solid 1px #e6e6e6;
        }

        .content-container .tab-menu .tab-menu-ul {
            height: 40px;
            margin-top: 5px;
            background: #FFFFFF;
            border-top: 1px solid #DCDFE6;
            border-left: 1px solid #DCDFE6;
            border-right: 1px solid #DCDFE6;
            display: inline-block;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            float: left;
        }

        .content-container .tab-menu .tab-menu-ul .tab-menu-li {
            position: relative;
            display: inline-block;
            line-height: 40px;
            padding: 0px 24px;
            font-size: 14px;
            color: #303133;
            letter-spacing: 0;
            font-weight: bold;
            list-style: none;
            cursor: pointer;
            float: left;
        }

        .content-container .tab-menu .tab-menu-ul .tab-menu-li .el-icon-close {
            position: absolute;
            top: 5px;
            right: 5px;
            display: none;
        }

        .content-container .tab-menu .tab-menu-ul .tab-menu-li:hover .el-icon-close {
            display: inline-block;
            color: gray;
        }

        .content-container .tab-menu .tab-menu-ul .active {
            border-bottom: 1px solid #ffffff;
            color: #1989FA;
        }

        .content-container .tab-menu .tab-menu-ul .active .el-icon-close {
            color: #1989FA;
            display: inline-block;
        }

        .content-container .tab-menu .tab-menu-ul .tab-menu-li:not(:first-child) {
            border-left: 1px solid #DCDFE6;
        }

        .content-container .tab-menu .title {
            font-size: 22px;
            color: #000000;
            line-height: 22px;
            margin-right: 20px;
        }
        .operation-menu {
            border-bottom: 1px solid #DCDFE6;
        }
        .no-border {
            border: 0px;
        }

        .content-container .content-nav {
            background: #F5F7FA;
            height: 15px;
        }

        .operation-menu>div:not(:last-child) {
            border-bottom: 1px solid #DCDFE6;
        }

        .operation-menu .operation-menu__button {
            padding: 10px 20px;
        }

        .operation-menu .operation-menu__search {
            padding: 10px 20px 0px 20px;
        }

        .operation-menu .operation-menu__search .search-condition .search-item {
            float: left;
            display: inline-block;
            margin: 0px 20px 10px 0px;
        }

        .operation-menu .operation-menu__search .search-condition .search-item .label {
            font-size: 14px;
            color: #000000;
            letter-spacing: 0;
            line-height: 16px;
            margin-right: 10px;
            vertical-align: middle;
        }

        .operation-menu .operation-menu__search .search-condition .search-item .search-input {
            display: inline-block;
        }

        .content-container .muti-table {
            background: #FFFFFF;
        }

        .content-container .muti-table .table-row {
            /*padding: 8px 0px;*/
            padding-left: 20px;
            border-bottom: solid 1px #e6e6e6;
            word-break: break-all;
        }

        .content-container .muti-table .table-row .muti-table__table-cell {
            padding: 0px 10px;
            box-sizing: border-box;
        }

        .content-container .muti-table .table-row__sep {
            padding: 8px 0px;
        }

        .content-container .muti-table .table-row__left .muti-table__table-cell {
            line-height: 100%
        }

        .content-container .muti-table .table-th {
            font-size: 14px;
            color: #909399;
            letter-spacing: 0;
            text-align: left;
            line-height: 16px;
            font-weight: bold;
        }

        .content-container .muti-table .content-row {
            font-size: 14px;
            color: #606266;
            letter-spacing: 0;
            text-align: left;
            line-height: 14px;
        }

        .content-container .muti-table .content-row:hover {
            background: #eeeeee;
        }

        .content-container .muti-table .table-row__left {
            min-width: 420px;
            /*width: 25%*/
        }

        .content-container .muti-table .table-row .id-cell {
            width: 80px;
        }
        .content-container .muti-table .table-row .rule-name-cell {
            width: 100px;
        }
        .content-container .muti-table .table-row .effect-time-cell {
            width: 120px;
        }
        .content-container .muti-table .table-row .operation-cell {
            width: 160px;
        }


    </style>
</head>

<body style="display: none;">
    <div id="app" class="container" flex>
        <el-admin-menu :user-detail="userDetail" :menus="menus" @logout="logout">
            <div class="content-container" flex-box=1 flex="dir:top">
            <div flex-box="0" class="tab-menu" flex="cross:center">
                <div class="title" flex-box=0>设置结算</div>
            </div>
            <div flex-box="1">
                <div class="operation-menu">
                    <div class="operation-menu__button" flex>
                        <div flex-box="0">
                            <div class="operation-menu__search" flex="cross:top">
                                <div flex-box="0">
                                    <el-button type="primary" icon="el-icon-circle-plus-outline" size="small">新建定义</el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content-nav"></div>
                <div class="muti-table">
                    <div class="table-th table-row" flex-box="1" flex>
                        <div class="table-row__sep table-row__left" flex-box="1" style="border-right: solid 1px #e6e6e6;" flex>
                            <div flex-box="0" class="muti-table__table-cell id-cell" flex="cross:center">定义ID</div>
                            <div flex-box="1" class="muti-table__table-cell rule-name-cell" flex="cross:center">规则名称</div>
                            <div flex-box="1" class="muti-table__table-cell id-cell" flex="cross:center">是否生效</div>
                            <div flex-box="1" class="muti-table__table-cell effect-time-cell" flex="cross:center">生效时间</div>
                            <div flex-box="1" class="muti-table__table-cell effect-time-cell" flex="cross:center">失效时间</div>
                            <div flex-box="1" class="muti-table__table-cell id-cell" flex="cross:center">模块名称</div>
                            <div flex-box="1" class="muti-table__table-cell id-cell" flex="cross:center">创建人</div>
                            <div flex-box="0" class="muti-table__table-cell operation-cell" flex="cross:center">操作</div>
                        </div>
                        <div class="table-row__sep" flex-box="1">
                            <div flex-box="1" flex class="table-row__right">
                                <div flex-box="1" class="muti-table__table-cell id-cell" flex="cross:center">结算值</div>
                                <div flex-box="1" class="muti-table__table-cell id-cell" flex="cross:center">梯度开始值（单）</div>
                                <div flex-box="1" class="muti-table__table-cell id-cell" flex="cross:center">梯度结束值（单）</div>
                                <div flex-box="0" class="muti-table__table-cell operation-cell" flex="cross:center">操作</div>
                            </div>
                        </div>
                    </div>
                    <div class="content-row table-row" flex-box="1" flex>
                        <div class="table-row__sep table-row__left" flex-box="1" style="border-right: solid 1px #e6e6e6;" flex>
                            <div flex-box="0" class="muti-table__table-cell id-cell" flex="cross:center">001</div>
                            <div flex-box="1" class="muti-table__table-cell rule-name-cell" flex="cross:center">规则1111111</div>
                            <div flex-box="1" flex="cross:center" class="muti-table__table-cell id-cell">是</div>
                            <div flex-box="1" flex="cross:center" class="muti-table__table-cell effect-time-cell">2018/06/01</div>
                            <div flex-box="1" flex="cross:center" class="muti-table__table-cell effect-time-cell">2018/06/01</div>
                            <div flex-box="1" flex="cross:center" class="muti-table__table-cell id-cell">孕产</div>
                            <div flex-box="1" flex="cross:center" class="muti-table__table-cell id-cell">张三</div>
                            <div flex-box="0" flex="cross:center" class="muti-table__table-cell operation-cell">
                                <div>
                                    <el-button type="primary" size="mini">添加结算规则</el-button>
                                    <el-button size="mini" @click="dialogDefinitionChange = true">修改</el-button>
                                    <el-button size="mini">删除</el-button>
                                </div>
                            </div>
                        </div>
                        <div class="table-row__sep" flex-box="1">
                            <div style="border-bottom: solid 1px #e6e6e6;padding: 10px 0px " flex>
                                <div flex-box="1" flex class="table-row__right">
                                    <div flex-box="1" class="muti-table__table-cell id-cell" flex="cross:center">10</div>
                                    <div flex-box="1" class="muti-table__table-cell id-cell" flex="cross:center">20</div>
                                    <div flex-box="1" class="muti-table__table-cell id-cell" flex="cross:center">100</div>
                                    <div flex-box="0" class="muti-table__table-cell operation-cell" flex="cross:center">
                                        <div>
                                            <el-button size="mini" @click="dialogSettlementRule = true">修改</el-button>
                                            <el-button size="mini">删除</el-button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div style="padding-top: 10px" flex-box="1" flex>
                                <div flex-box="1" flex class="table-row__right">
                                    <div flex-box="1" class="muti-table__table-cell id-cell" flex="cross:center">5</div>
                                    <div flex-box="1" class="muti-table__table-cell id-cell" flex="cross:center">20</div>
                                    <div flex-box="1" class="muti-table__table-cell id-cell" flex="cross:center">30</div>
                                    <div flex-box="0" class="muti-table__table-cell operation-cell" flex="cross:center">
                                        <div>
                                            <el-button size="mini">修改</el-button>
                                            <el-button size="mini">删除</el-button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="content-row table-row" flex>
                        <div class="table-row__sep table-row__left" flex-box="1" style="border-right: solid 1px #e6e6e6;" flex>
                            <div flex-box="0" class="muti-table__table-cell id-cell" flex="cross:center">001</div>
                            <div flex-box="1" class="muti-table__table-cell rule-name-cell" flex="cross:center">规则22222222</div>
                            <div flex-box="1" flex="cross:center" class="muti-table__table-cell id-cell">是</div>
                            <div flex-box="1" flex="cross:center" class="muti-table__table-cell effect-time-cell">2018/06/01</div>
                            <div flex-box="1" flex="cross:center" class="muti-table__table-cell effect-time-cell">2018/06/01</div>
                            <div flex-box="1" flex="cross:center" class="muti-table__table-cell id-cell">孕产</div>
                            <div flex-box="1" flex="cross:center" class="muti-table__table-cell id-cell">张三</div>
                            <div flex-box="0" flex="cross:center" class="muti-table__table-cell operation-cell">
                                <div>
                                    <el-button type="primary" size="mini">添加结算规则</el-button>
                                    <el-button size="mini">修改</el-button>
                                    <el-button size="mini">删除</el-button>
                                </div>
                            </div>
                        </div>
                        <div class="table-row__sep" flex-box="1">
                            <div style="padding: 10px 0px " flex>
                                <div flex-box="1" flex class="table-row__right">
                                    <div flex-box="1" class="muti-table__table-cell id-cell" flex="cross:center">50%</div>
                                    <div flex-box="1" class="muti-table__table-cell id-cell" flex="cross:center">200</div>
                                    <div flex-box="1" class="muti-table__table-cell id-cell" flex="cross:center">300</div>
                                    <div flex-box="0" class="muti-table__table-cell operation-cell" flex="cross:center">
                                        <div>
                                            <el-button size="mini">修改</el-button>
                                            <el-button size="mini">删除</el-button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </el-admin-menu>

        <!--修改定义-->
        <el-dialog title="修改定义" :visible.sync="dialogDefinitionChange" width="330px">
            <el-form :model="form">
                <el-form-item label="规则名称" :label-width="formLabelWidth">
                    <el-input v-model="form.ruleName" auto-complete="off" style="width: 180px;"></el-input>
                </el-form-item>
                <el-form-item label="结算模板" :label-width="formLabelWidth">
                    <el-select v-model="form.module" placeholder="请选择" style="width: 180px;">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="优惠商家占比" :label-width="formLabelWidth">
                    <el-input v-model="form.scale" auto-complete="off" style="width: 180px;"></el-input>
                </el-form-item>
                <el-form-item label="生效时间" :label-width="formLabelWidth">
                    <el-date-picker v-model="form.beginTime" type="date" placeholder="选择日期" style="width: 180px;">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="失效时间" :label-width="formLabelWidth">
                    <el-date-picker v-model="form.endTime" type="date" placeholder="选择日期" style="width: 180px;">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="是否生效" :label-width="formLabelWidth">
                    <el-select v-model="form.effect" placeholder="请选择" style="width: 100px;">
                        <el-option label="是" value="yes"></el-option>
                        <el-option label="否" value="no"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="definitionChange">保 存</el-button>
            </div>
        </el-dialog>

        <!--修改结算规则-->
        <el-dialog title="修改结算规则" :visible.sync="dialogSettlementRule" width="400px">
            <el-form :model="form">
                <el-form-item label="结算值" :label-width="formLabelWidth">
                    <el-input v-model="form.balanceValue" auto-complete="off" placeholder="请填百分比或金额，如5%丶100" style="width: 240px;"></el-input>
                </el-form-item>
                <el-form-item label="梯度开始值" :label-width="formLabelWidth">
                    <el-input v-model="form.gradientBegin" auto-complete="off" style="width: 240px;"></el-input>
                </el-form-item>
                <el-form-item label="梯度结束值" :label-width="formLabelWidth">
                    <el-input v-model="form.gradientEnd" auto-complete="off" style="width: 240px;"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="settlementRule">保 存</el-button>
            </div>
        </el-dialog>

        <!--修改结算提醒-->
        <el-dialog title="修改结算规则" :visible.sync="dialogResultOfChange" width="70%">
            <div style="width: 100%;margin-top: -40px;">
                <el-section-pannel title="发现规则变动，影响如下订单"></el-section-pannel>
                <el-table ref="multipleTable" :data="tableData" @selection-change="handleSelectionChange" style="width: 100%" height="250">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="orderNo" label="订单编号" width="100"></el-table-column>
                    <el-table-column prop="orderDate" label="下单日期" width="100"></el-table-column>
                    <el-table-column prop="projectName" label="项目名称"></el-table-column>
                    <el-table-column prop="consumeDate" label="消费到店时间" width="120"></el-table-column>
                    <el-table-column prop="payPrice" label="实付金额"  width="120"></el-table-column>
                    <el-table-column label="结算值"  width="120">
                        <template slot-scope="scope">
                            <el-input prop="balanceValue" v-model="balanceValue"></el-input>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="operation-menu no-border">
                    <div class="operation-menu__search" flex="cross:top">
                        <div flex-box="1" class="search-condition">
                            <div class="search-item">
                                <span class="label">修改结算值为</span>
                                <div class="search-input" style="width: 100px">
                                    <el-input v-model="username" placeholder="" size="small"></el-input>
                                </div>
                            </div>
                        </div>
                        <div flex-box="0">
                            <el-button type="default" size="small" @click="dialogResultOfChange = false">取消，保持原规则</el-button>
                            <el-button type="primary" size="small" @click="saveNewRule">保存，设置新规则</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>

        <!--确认保存-->
        <el-dialog title="提示" :visible.sync="dialogSureSave" width="30%" :before-close="handleClose">
            <span>确定保存？</span>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogSureSave = false">取 消</el-button>
            <el-button type="primary" @click="sureSave">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</body>
<script src="common/config.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>window.jQuery||document.write('<script src="//cdn.staticfile.org/jquery/3.1.1/jquery.min.js"><\/script>')</script>
<script src="testdata/test_data.js"></script>
<script src="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.index.js"></script>
<script src="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.comon.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                dialogDefinitionChange: false,
                dialogSettlementRule: false,
                dialogResultOfChange: false,
                dialogSureSave: false,
                form: {
                    ruleName: '',
                    module: '',
                    scale: '',
                    beginTime: '',
                    endTime: '',
                    effect: '',
                },
                form1: {
                    balanceValue: '',
                    gradientBegin: '',
                    gradientEnd: '',
                },
                formLabelWidth: '100px',
                visible: false,
                options: [{
                    value: '选项1',
                    label: '是'
                }, {
                    value: '选项2',
                    label: '否'
                }],
                tableData: [
                    {
                        isSelected: true,
                        orderNo: '222222222',
                        orderDate: '2018/05/21',
                        projectName: '金贝贝·月嫂  5大直营门店，省心选月嫂平台报名专享超¥200增值大礼包',
                        consumeDate: '2018/05/21',
                        payPrice: '1800.00',
                        balanceValue: '5%'
                    },
                    {
                        isSelected: true,
                        orderNo: '222222222',
                        orderDate: '2018/05/21',
                        projectName: '金贝贝·月嫂  5大直营门店，省心选月嫂平台报名专享超¥200增值大礼包',
                        consumeDate: '2018/05/21',
                        payPrice: '1800.00',
                        balanceValue: '5%'
                    },
                    {
                        isSelected: true,
                        orderNo: '222222222',
                        orderDate: '2018/05/21',
                        projectName: '金贝贝·月嫂  5大直营门店，省心选月嫂平台报名专享超¥200增值大礼包',
                        consumeDate: '2018/05/21',
                        payPrice: '1800.00',
                        balanceValue: '5%'
                    },
                    {
                        isSelected: true,
                        orderNo: '222222222',
                        orderDate: '2018/05/21',
                        projectName: '金贝贝·月嫂  5大直营门店，省心选月嫂平台报名专享超¥200增值大礼包',
                        consumeDate: '2018/05/21',
                        payPrice: '1800.00',
                        balanceValue: '5%'
                    },
                    {
                        isSelected: true,
                        orderNo: '222222222',
                        orderDate: '2018/05/21',
                        projectName: '金贝贝·月嫂  5大直营门店，省心选月嫂平台报名专享超¥200增值大礼包',
                        consumeDate: '2018/05/21',
                        payPrice: '1800.00',
                        balanceValue: '5%'
                    },
                    {
                        isSelected: true,
                        orderNo: '222222222',
                        orderDate: '2018/05/21',
                        projectName: '金贝贝·月嫂  5大直营门店，省心选月嫂平台报名专享超¥200增值大礼包',
                        consumeDate: '2018/05/21',
                        payPrice: '1800.00',
                        balanceValue: '5%'
                    },
                ],
                multipleSelection: [],
                username: '',
                // 来自test_data.js
                menus: menus,
                // 来自test_data.js
                userDetail: userDetail
            }
        },
        methods: {
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            //修改定义保存
            definitionChange() {
                //请求数据......
                this.dialogResultOfChange = true;
                this.dialogDefinitionChange = false;
            },
            //修改结算规则保存
            settlementRule() {
                //请求数据......
                this.dialogResultOfChange = true;
                this.dialogSettlementRule = false;
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            saveNewRule() {
                if(this.multipleSelection.length<1) {
                    this.$alert('还没勾选任何项目', '提醒', {
                        confirmButtonText: '确定',
                        callback: action => {
                            this.$message({
                                type: 'info',
                                message: `action: ${ action }`
                            });
                        }
                    });
                }else {
                    //确定保存？
                    this.dialogSureSave = true;
                }
            },
            //确认保存
            sureSave() {
                this.dialogSureSave = false;
                this.dialogResultOfChange = false;
            },
            logout() {
                window.location.href = 'login.html';
            },
        },
        mounted() {
            document.querySelector('body').style.display = 'block';
        }
    });
</script>
</html>
